<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/xml" prefix="x"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql"%>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP / JSTL page</title>
<script type="text/javascript" src="content/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#scopeLink").click(function(event) {
        event.preventDefault();
        $("table#scope").toggle("slow");
    });
    $("a#pageScopeLink").click(function(event) {
        event.preventDefault();
        $("table#pageScope").toggle("slow");
    });
    $("a#requestScopeLink").click(function(event) {
        event.preventDefault();
        $("table#requestScope").toggle("slow");
    });
    $("a#sessionScopeLink").click(function(event) {
        event.preventDefault();
        $("table#sessionScope").toggle("slow");
    });
    $("a#applicationScopeLink").click(function(event) {
        event.preventDefault();
        $("table#applicationScope").toggle("slow");
    });
    $("a#cookieLink").click(function(event) {
        event.preventDefault();
        $("table#cookie").toggle("slow");
    });
    $("a#headerLink").click(function(event) {
        event.preventDefault();
        $("table#header").toggle("slow");
    });
    $("a#headerValuesLink").click(function(event) {
        event.preventDefault();
        $("table#headerValues").toggle("slow");
    });
    $("a#initParamLink").click(function(event) {
        event.preventDefault();
        $("table#initParam").toggle("slow");
    });
    $("a#paramLink").click(function(event) {
        event.preventDefault();
        $("table#param").toggle("slow");
    });
    $("a#paramValuesLink").click(function(event) {
        event.preventDefault();
        $("table#paramValues").toggle("slow");
    });
    $("#coreLink").click(function(event) {
        event.preventDefault();
        $("dl#core").toggle("slow");
    });
    $("#xmlLink").click(function(event) {
        event.preventDefault();
        $("div#xml").toggle("slow");
    });
    $("#dateFormatLink").click(function(event) {
        event.preventDefault();
        $("table#dateFormat").toggle("slow");
    });
    $("#numberFormatLink").click(function(event) {
        event.preventDefault();
        $("table#numberFormat").toggle("slow");
    });
});
</script>
<style type="text/css">
    dt { font-weight: bold; }
</style>
</head>
<body>
    <h1>JSP / JSTL</h1>
    <h2 id="scopeLink">Scope</h2>
    <table id="scope" border="1" style="display: none;" >
    <tr><th>Set/Remove value</th><th>Scoped Value</th><th>Value</th></tr>
    <tr>
        <c:set var="foo" value="application" scope="application" />
        <td>&lt;c:set var="foo" value="application" scope="application" /&gt;</td>
        <td>\${applicationScope.foo}=${applicationScope.foo}</td>
        <td>\${foo}=${foo}</td>
    </tr>
    <tr>
        <c:set var="foo" value="session" scope="session" />
        <td>&lt;c:set var="foo" value="session" scope="session" /&gt;</td>
        <td>\${sessionScope.foo}=${sessionScope.foo}</td>
        <td>\${foo}=${foo}</td>
    </tr>
    <tr>
        <c:set var="foo" value="request" scope="request" />
        <td>&lt;c:set var="foo" value="request" scope="request" /&gt;</td>
        <td>\${requestScope.foo}=${requestScope.foo}</td>
        <td>\${foo}=${foo}</td>
    </tr>
    <tr>
        <c:set var="foo" value="page" scope="page" />
           <td>&lt;c:set var="foo" value="page" scope="page" /&gt;</td>
        <td>\${pageScope.foo}=${pageScope.foo}</td>
        <td>\${foo}=${foo}</td>
    </tr>
    <tr>
        <c:remove var="foo" scope="page" />
        <td>&lt;c:remove var="foo" scope="page" /&gt;</td>
        <td>\${pageScope.foo}=${pageScope.foo}</td>
        <td>\${foo}=${foo}</td>
    </tr>
    <tr>
        <c:remove var="foo" scope="request" />
        <td>&lt;c:remove var="foo" scope="request" /&gt;</td>
        <td>\${requestScope.foo}=${requestScope.foo}</td>
        <td>\${foo}=${foo}</td>
    </tr>
    <tr>
        <c:remove var="foo" scope="session" />
        <td>&lt;c:remove var="foo" scope="session" /&gt;</td>
        <td>\${sessionScope.foo}=${sessionScope.foo}</td>
        <td>\${foo}=${foo}</td>
    </tr>
    <tr>
        <c:remove var="foo" scope="application" />
        <td>&lt;c:remove var="foo" scope="application" /&gt;</td>
        <td>\${applicationScope.foo}=${applicationScope.foo}</td>
        <td>\${foo}=${foo}</td>
    </tr>
    <tr>
        <c:set var="foo" value="default" />
        <td>&lt;c:set var="foo" value="default" /&gt;</td>
        <td>\${pageScope.foo}=${pageScope.foo}</td>
        <td>\${foo}=${foo}</td>
    </tr>
    </table>
    <h2>Implicit Objects</h2>
    <table>
        <tr>
            <td>
                <ul>
                    <li>\${<a id="pageScopeLink" href="#">pageScope</a>}</li>
                    <li>\${<a id="requestScopeLink" href="#">requestScope</a>}</li>
                    <li>\${<a id="sessionScopeLink" href="#">sessionScope</a>}</li>
                    <li>\${<a id="applicationScopeLink" href="#">applicationScope</a>}</li>
                    <li>\${<a id="cookieLink" href="#">cookie</a>}</li>
                    <li>\${<a id="headerLink" href="#">header</a>}</li>
                    <li>\${<a id="headerValuesLink" href="#">headerValues</a>}</li>
                    <li>\${<a id="initParamLink" href="#">initParam</a>}</li>
                    <li>\${<a id="paramLink" href="#">param</a>}</li>
                    <li>\${<a id="paramValuesLink" href="#">paramValues</a>}</li>
                    <li>\${pageContext}</li>
                </ul>
            </td>
            <td style="overflow: auto; display: block; width: 60em; height: 15em;">
                <table id="pageScope" border="1" style="display: none;">
                    <tr>
                        <th>Page Scope</th>
                        <th>Value</th>
                    </tr>
                    <c:forEach items="${pageScope}" var="token">
                        <tr>
                            <td>${token.key}</td>
                            <td>${token.value}</td>
                        </tr>
                    </c:forEach>
                </table>
                <table id="requestScope" border="1" style="display: none;">
                    <tr>
                        <th>Request Scope</th>
                        <th>Value</th>
                    </tr>
                    <c:forEach items="${requestScope}" var="token">
                        <tr>
                            <td>${token.key}</td>
                            <td>${token.value}</td>
                        </tr>
                    </c:forEach>
                </table>
                <table id="sessionScope" border="1" style="display: none;">
                    <tr>
                        <th>Session Scope</th>
                        <th>Value</th>
                    </tr>
                    <c:forEach items="${sessionScope}" var="token">
                        <tr>
                            <td>${token.key}</td>
                            <td>${token.value}</td>
                        </tr>
                    </c:forEach>
                </table>
                <table id="applicationScope" border="1" style="display: none;">
                    <tr>
                        <th>Application Scope</th>
                        <th>Value</th>
                    </tr>
                    <c:forEach items="${applicationScope}" var="token">
                        <tr>
                            <td>${token.key}</td>
                            <td>${token.value}</td>
                        </tr>
                    </c:forEach>
                </table>
                <table id="cookie" border="1" style="display: none;">
                    <tr>
                        <th>Cookie</th>
                        <th>Name</th>
                        <th>Value</th>
                        <th>Max Age</th>
                        <th>Domain</th>
                        <th>Path</th>
                        <th>Secure</th>
                        <th>Version</th>
                        <th>Comment</th>
                    </tr>
                    <c:forEach items="${cookie}" var="token">
                        <tr>
                            <td>${token.key}</td>
                            <td>${token.value.name}</td>
                            <td>${token.value.value}</td>
                            <td>${token.value.maxAge}</td>
                            <td>${token.value.domain}</td>
                            <td>${token.value.path}</td>
                            <td>${token.value.secure}</td>
                            <td>${token.value.version}</td>
                            <td>${token.value.comment}</td>
                        </tr>
                    </c:forEach>
                </table>
                <table id="header" border="1" style="display: none;">
                    <tr>
                        <th>Header</th>
                        <th>Value</th>
                    </tr>
                    <c:forEach items="${header}" var="token">
                        <tr>
                            <td>${token.key}</td>
                            <td>${token.value}</td>
                        </tr>
                    </c:forEach>
                </table>
                <table id="headerValues" border="1" style="display: none;">
                    <tr>
                        <th>Header Values</th>
                        <th>Value</th>
                    </tr>
                    <c:forEach items="${headerValues}" var="token">
                    <tr>
                        <td>${token.key}</td>
                        <td>
                            <ul style="margin: 0em">
                            <c:forEach items="${token.value}" var="item">
                                <li>${item}</li>
                            </c:forEach>
                            </ul>
                        </td>
                    </tr>
                    </c:forEach>
                </table>
                <table id="initParam" border="1" style="display: none;">
                    <tr>
                        <th>Initial Parameter</th>
                        <th>Value</th>
                    </tr>
                    <c:forEach items="${initParam}" var="token">
                        <tr>
                            <td>${token.key}</td>
                            <td>${token.value}</td>
                        </tr>
                    </c:forEach>
                </table>
                <table id="param" border="1" style="display: none;">
                    <tr>
                        <th>Parameter</th>
                        <th>Value</th>
                    </tr>
                    <c:forEach items="${param}" var="token">
                        <tr>
                            <td>${token.key}</td>
                            <td>${token.value}</td>
                        </tr>
                    </c:forEach>
                </table>
                <table id="paramValues" border="1" style="display: none;">
                    <tr>
                        <th>Parameter Values</th>
                        <th>Value</th>
                    </tr>
                    <c:forEach items="${paramValues}" var="token">
                        <tr>
                            <td>${token.key}</td>
                            <td>${token.value}</td>
                        </tr>
                    </c:forEach>
                </table>
            </td>
        </tr>
    </table>

    <h2 id="coreLink">Core</h2>
    <dl id="core" style="display: none;">
        <dt>c:if</dt>
        <dd>&lt;c:if test="\${condition}"&gt;...&lt;/c:if&gt;</dd>
        <dt>c:set</dt>
        <dd>&lt;c:set var="variable" scope="session" value="\${expression}/&gt;</dd>
        <dt>c:out</dt>
        <dd>&lt;c:out value="\${expression}"/&gt;</dd>
        <dt>c:remove</dt>
        <dd>&lt;c:remove var="variable" scope="session"/&gt;</dd>
        <dt>c:choose</dt>
        <dd>
            &lt;c:choose&gt;<br />
            <blockquote>
                &lt;c:when test="\${cond1}"&gt; ... &lt;/c:when&gt;<br />
                &lt;c:when test="\${cond2}"&gt; ... &lt;/c:when&gt;<br /> ...<br />
                c:otherwise&gt; ... &lt;/c:otherwise&gt;
            </blockquote>
            &lt;/c:choose&gt;
        </dd>
        <dt>c:forEach</dt>
        <dd>&lt;c:forEach var="variable" items="\${list}"&gt; ... &lt;/c:forEach&gt;</dd>
        <dt>c:forTokens</dt>
        <dd>&lt;c:forTokens var="token" delims=";" items="\${list}"&gt; ... &lt;/c:forEach&gt;</dd>
        <dt>c:import</dt>
        <dd>&lt;c:import url="http://code.google.com/p/tamal-project" var="project"/&gt;</dd>
        <dt>c:url</dt>
        <dd>&lt;c:url url="/index.jsp"&gt;
            <blockquote>
                &lt;c:param name="param1" value="val1"/&gt;<br /> &lt;c:param
                name="param2" value="val2"/&gt;
            </blockquote>
            &lt;/c:url&gt;
        </dd>
        <dt>c:redirect</dt>
        <dd>&lt;c:redirect url="http://code.google.com/p/tamal"/&gt;</dd>
    </dl>

    <h2 id="xmlLink">XML</h2>
    <div id="xml" style="display: none;">
        <c:set var="xmlStr">
          <ol>
              <li>Ram</li>
              <li id='2'>Shyam</li>
              <li>Jodu</li>
              <li id='4'>Modu</li>
          </ol>
        </c:set>
        <x:parse var="xml" xml="${xmlStr}" />
        <p>The XML is: <c:out value="${xmlStr}" /></p>
        <h3>&lt;x:out&gt;</h3>
        <ul>
            <li>&lt;x:out select="$xml" /&gt; = <x:out select="$xml" /></li>
            <li>&lt;x:out select="$xml/ol/li" /&gt; = <x:out select="$xml/ol/li" /></li>
            <li>&lt;x:out select="$xml/ol/li[@id=2]" /&gt; = <x:out select="$xml/ol/li[@id=2]" /></li>
            <li>&lt;x:out select="$xml/ol/li[last()]" /&gt; = <x:out select="$xml/ol/li[last()]" /></li>
            <li>&lt;x:out select="$xml//li[@id]" /&gt; = <x:out select="$xml//li[@id]" /></li>
            <li>&lt;x:out select="$xml//li[@id&gt;0]" /&gt; = <x:out select="$xml//li[@id>0]" /></li>
        </ul>

        <h3>&lt;x:if&gt;</h3>
        <x:if select="$xml/ol/li[@id=4]">
            <p>id=4 found (&lt;x:if select="$xml/ol/li[@id=4]"&gt;&lt;x:if&gt;)</p>
        </x:if>

        <h3>&lt;x:set&gt; &amp; &lt;x:forEach&gt;</h3>
        <x:set var="ol" select="$xml/ol" />
        <p>&lt;x:set var="each" select="$xml/ol" /&gt;</p>
        <p>&lt;x:forEach select="$ol/li"&gt; <br /> &lt;x:out select="." /&gt;</p>
        <ul>
            <x:forEach select="$ol/li">
                <li><x:out select="." /></li>
            </x:forEach>
        </ul>

        <h3>&lt;x:choose&gt;, &lt;x:when&gt; &amp; &lt;x:otherwise&gt;</h3>
        <x:choose>
          <x:when select="$ol/li[@id=2]">&lt;x:when select="$ol/li[@id=2]"&gt;</x:when>
          <x:when select="$ol/li[@id=4]">&lt;x:when select="$ol/li[@id=4]"&gt;</x:when>
          <x:otherwise>&lt;x:otherwise&gt;</x:otherwise>
        </x:choose>
    </div>
    <h2>Format</h2>
    <h3 id="dateFormatLink">Date/Time</h3>
    <jsp:useBean id="now" class="java.util.Date" />
    <table id="dateFormat" border="1" style="display: none;">
        <tr><th>Syntax</th><th>Output</th></tr>
        <tr>
            <td>&lt;fmt:formatDate value="\${now}" type="date" /&gt;</td>
            <td><fmt:formatDate value="${now}" type="date" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatDate value="\${now}" dateStyle="short" type="date" /&gt;</td>
            <td><fmt:formatDate value="${now}" dateStyle="short" type="date" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatDate value="\${now}" dateStyle="medium" type="date" /&gt;</td>
            <td><fmt:formatDate value="${now}" dateStyle="medium" type="date" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatDate value="\${now}" dateStyle="long" type="date" /&gt;</td>
            <td><fmt:formatDate value="${now}" dateStyle="long" type="date" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatDate value="\${now}" dateStyle="full" type="date" /&gt;</td>
            <td><fmt:formatDate value="${now}" dateStyle="full" type="date" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatDate value="\${now}" type="time" /&gt;</td>
            <td><fmt:formatDate value="${now}" type="time" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatDate value="\${now}" timeStyle="short" type="time" /&gt;</td>
            <td><fmt:formatDate value="${now}" timeStyle="short" type="time" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatDate value="\${now}" timeStyle="medium" type="time" /&gt;</td>
            <td><fmt:formatDate value="${now}" timeStyle="medium" type="time" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatDate value="\${now}" timeStyle="long" type="time" /&gt;</td>
            <td><fmt:formatDate value="${now}" timeStyle="long" type="time" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatDate value="\${now}" timeStyle="full" type="time" /&gt;</td>
            <td><fmt:formatDate value="${now}" timeStyle="full" type="time" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatDate value="\${now}" type="both" /&gt;</td>
            <td><fmt:formatDate value="${now}" type="both" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatDate value="\${now}" dateStyle="short" timeStyle="short" type="both" /&gt;</td>
            <td><fmt:formatDate value="${now}" dateStyle="short" timeStyle="short" type="both" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatDate value="\${now}" dateStyle="medium" timeStyle="medium" type="both" /&gt;</td>
            <td><fmt:formatDate value="${now}" dateStyle="medium" timeStyle="medium" type="both" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatDate value="\${now}" dateStyle="long" timeStyle="long" type="both" /&gt;</td>
            <td><fmt:formatDate value="${now}" dateStyle="long" timeStyle="long" type="both" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatDate value="\${now}" dateStyle="full" timeStyle="full" type="both" /&gt;</td>
            <td><fmt:formatDate value="${now}" dateStyle="full" timeStyle="full" type="both" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatDate value="\${now}" pattern="EEE, dd-MMM-yy, hh:mm a" /&gt;</td>
            <td><fmt:formatDate value="${now}" pattern="EEE, dd-MMM-yy, hh:mm a" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatDate value="\${now}" timeZone="GMT" type="time" timeStyle="full" /&gt;</td>
            <td><fmt:formatDate value="${now}" timeZone="GMT" type="time" timeStyle="full" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatDate value="\${now}" timeZone="IST" type="time" timeStyle="full" /&gt;</td>
            <td><fmt:formatDate value="${now}" timeZone="IST" type="time" timeStyle="full" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:parseDate type="both" dateStyle="short" timeStyle="short" timeZone="GMT" value="7/8/12 10:16 PM" parseLocale="en_IN"/&gt;</td>
            <td><fmt:parseDate type="both" dateStyle="short" timeStyle="short" timeZone="GMT" value="7/8/12 10:16 PM" parseLocale="en_IN"/></td>
        </tr>
    </table>
    <h3 id="numberFormatLink">Number/Currency</h3>
    <table id="numberFormat" border="1" style="display: none;">
        <tr><th>Syntax</th><th>Output</th></tr>
        <tr>
            <fmt:setLocale value="en_GB" />
            <td>&lt;fmt:formatNumber type="currency" currencyCode="EUR" value="-12345.6789" /&gt;</td>
            <td><fmt:formatNumber type="currency" currencyCode="EUR" value="-12345.6789" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatNumber type="currency" currencyCode="GBP" value="-12345.6789" /&gt;</td>
            <td><fmt:formatNumber type="currency" currencyCode="GBP" value="-12345.6789" /></td>
        </tr>
        <tr>
            <fmt:setLocale value="en_US" />
            <td>&lt;fmt:formatNumber type="currency" currencyCode="USD" value="-12345.6789" /&gt;</td>
            <td><fmt:formatNumber type="currency" currencyCode="USD" value="-12345.6789" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatNumber groupingUsed="true" value="-12345.6789" /&gt;</td>
            <td><fmt:formatNumber groupingUsed="true" value="-12345.6789" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatNumber groupingUsed="false" value="-12345.6789" /&gt;</td>
            <td><fmt:formatNumber groupingUsed="false" value="-12345.6789" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatNumber maxFractionDigits="2" value="-12345.6789" /&gt;</td>
            <td><fmt:formatNumber maxFractionDigits="2" value="-12345.6789" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatNumber maxFractionDigits="2" value="-12345" /&gt;</td>
            <td><fmt:formatNumber maxFractionDigits="2" value="-12345" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatNumber minFractionDigits="2" value="-12345.6789" /&gt;</td>
            <td><fmt:formatNumber minFractionDigits="2" value="-12345.6789" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatNumber minFractionDigits="2" value="-12345" /&gt;</td>
            <td><fmt:formatNumber minFractionDigits="2" value="-12345" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatNumber minIntegerDigits="7" value="-12345" /&gt;</td>
            <td><fmt:formatNumber minIntegerDigits="7" value="-12345" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatNumber type="percent" value="-0.0555" /&gt;</td>
            <td><fmt:formatNumber type="percent" value="-0.0555" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:formatNumber type="percent" minFractionDigits="2" value="-0.0555" /&gt;</td>
            <td><fmt:formatNumber type="percent" minFractionDigits="2" value="-0.0555" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:parseNumber type="currency" parseLocale="en_US" value="($12,345.67890)" /&gt;</td>
            <td><fmt:parseNumber type="currency" parseLocale="en_US" value="($12,345.67890)" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:parseNumber value="12,345.67890" integerOnly="true" /&gt;</td>
            <td><fmt:parseNumber value="12,345.67890" integerOnly="true" /></td>
        </tr>
        <tr>
            <td>&lt;fmt:parseNumber type="percent" value="99.9%" /&gt;</td>
            <td><fmt:parseNumber type="percent" value="99.9%" /></td>
        </tr>
    </table>
</body>
</html>
